<template>
  <div class="category">
    <div>
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          :title="item"
          v-for="(item, index) in category"
          :key="index"
        />
      </van-sidebar>
    </div>
    <div class="left">
      <van-card
      v-for="(item, index) in movieList" :key="index"
        :price="item.price"
        :title="item.name"
        :thumb="item.posters"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      category: [],
      movieList: [],
    };
  },
  created() {
    this.getCategory();
    this.getMovieList('冒险')
  },
  methods: {
    onChange(index) {
      this.getMovieList(this.category[index])
    },
    async getCategory() {
      const { data: res } = await this.$http.get(`category`);
      if (res.status !== 200) return this.$message.fail("获取电影分类失败");
      this.category = res.data;
    },
    async getMovieList(category) {
      const { data: res } = await this.$http.get(`getCategoryMovie?category=`+category);
      if (res.status !== 200) return this.$message.fail("获取电影分类失败");
      this.movieList = res.data
    },
  },
};
</script>

<style lang="less" scoped>
.category {
  display: flex;
  flex-direction: row;
}
.left {
  flex: 1;
}

</style>